<template>
  <div class="baseConfig">
    <div class="mains_contain">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="mini"
        @click="handleAdd"
        v-has="['config:add']"
        >新增</el-button
      >
      <el-table
        :data="tableData"
        style="width: 100%; margin-top: 10px"
        fit
        :max-height="maxHeight"
        border
        stripe
        size="mini"
        highlight-current-row
        :header-cell-style="{ background: '#e5e5e5', color: '#000' }"
      >
        <el-table-column prop="tenantTxt" label="租户名称" />
        <el-table-column prop="baseUrl" label="连接地址" />
        <el-table-column prop="appId" label="appId" />
        <el-table-column prop="appKey" label="appKey" />
        <!-- <el-table-column prop="tenantId" label="tenantId" /> -->
        <el-table-column label="操作" width="180" align="center">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="mini"
              @click="handleEdit(row)"
              icon="el-icon-edit"
              v-has="['config:edit']"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="text"
              style="color: #f56c6c"
              icon="el-icon-delete"
              @click="onCanle(row)"
              v-has="['config:delete']"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right">
        <pagination
          v-show="pagination.total > 0"
          :limit.sync="pagination.pageSize"
          :page.sync="pagination.page"
          :total="pagination.total"
          @pagination="getPageList"
        />
      </div>
    </div>
    <el-dialog
      :title="curTitle"
      :visible.sync="dialogVisible"
      width="640px"
      @close="close"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formInline"
        :model="formInline"
        label-width="80px"
        size="small"
        :rules="rules"
      >
        <el-form-item label="租户" prop="tenantId">
          <el-select
            v-model="formInline.tenantId"
            style="width: 100%"
            placeholder="请选择"
          >
            <el-option
              :label="item.name"
              v-for="item in tenantList"
              :value="item.id"
              :key="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="连接地址" prop="baseUrl">
          <el-input v-model="formInline.baseUrl" clearable />
        </el-form-item>
        <el-form-item label="appId" prop="appId">
          <el-input v-model="formInline.appId" clearable />
        </el-form-item>
        <el-form-item label="appKey" prop="appKey">
          <el-input type="input" v-model="formInline.appKey" clearable />
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="primary" @click="submit('formInline')" size="small"
          >保存</el-button
        >
        <el-button @click="close" size="small">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as baseConfigApi from "@/api/link/baseConfig";
import * as tenantApi from "@/api/sys/tenant";

export default {
  comments: {},
  props: {},
  data() {
    return {
      tenantList: [],
      multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      dialogVisible: false,
      curTitle: "新增",
      formInline: {},
      rules: {
        baseUrl: [
          { required: true, message: "请输入连接地址", trigger: "blur" },
        ],
        appId: [{ required: true, message: "请输入appId", trigger: "blur" }],
        appKey: [{ required: true, message: "请选择appKey", trigger: "blur" }],
        tenantId: [
          { required: true, message: "必须选择租户", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  created() {
    this.getPageList();
    this.getTenantList();
  },
  mounted() {},
  methods: {
    close() {
      this.dialogVisible = false;
      this.$refs.formInline.resetFields();
    },
    // 获取租户数据
    getTenantList() {
      tenantApi.queryIdNamePair().then((res) => {
        this.tenantList = res.data;
      });
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.formInline);
          if (this.curTitle == "新增") {
            baseConfigApi.configSave(this.formInline).then((resp) => {
              this.getPageList();
              this.dialogVisible = false;
              if (resp.code == 200) {
                this.$message({
                  message: `${this.curTitle}成功`,
                  type: "success",
                });
              }
            });
          } else {
            baseConfigApi.configUpdate(this.formInline).then((resp) => {
              this.getPageList();
              this.dialogVisible = false;
              if (resp.code == 200) {
                this.$message({
                  message: `${this.curTitle}成功`,
                  type: "success",
                });
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 新增
    handleAdd() {
      this.dialogVisible = true;
      this.curTitle = "新增";
      this.formInline = {};
    },
    // 编辑
    handleEdit(row) {
      this.dialogVisible = true;
      this.curTitle = "编辑";
      this.formInline = Object.assign({}, row);
    },
    // 删除
    onCanle(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          baseConfigApi.deleteById(row.id).then((resp) => {
            if (resp.code == 200) {
              this.$message({
                message: `删除成功`,
                type: "success",
              });
              this.getPageList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 复选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getPageList() {
      this.search();
    },
    search() {
      const p = Object.assign({}, this.pagination);
      baseConfigApi.configPage(p).then((resp) => {
        if (resp.data) {
          this.tableData = resp.data.records;
          this.pagination.page = resp.data.current;
          this.pagination.total = resp.data.total;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.baseConfig {
  padding: 20px;

  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
